<template>
	<view>
		<view class="bg" >
			<!-- <view style="position: absolute;top: 176.36rpx;left: 68.25rpx;">
				<image :src="biaotou" style="width: 464.46rpx;height: 120.81rpx;"></image>
			</view>
			<view style="display: flex;position: absolute;left: 68.25rpx;top: 387.76rpx;font-size: 36.24rpx;font-weight: bold;text-align: center;">
				<view v-for="(item,index) in zhuce" :key="index" style="margin-right: 90rpx;display: flex;flex-direction: column;align-items: center;" @tap="huanshu(item,index)">
					<view :style="[{color:xuanze == index?'#EE7B30':'#D2D2D2'}]">{{item}}</view>
					<view style="background: #EE7B30;height: 6.03rpx;width: 36.24rpx;border-radius: 3.02rpx;margin-top:5rpx ;" v-if="xuanze == index"></view>
				</view>
			</view> -->
			<!-- <view style="position: absolute;left: 68.25rpx;top: 515.2rpx;">
				<view style="margin-bottom: 49rpx;">
					<input id="inp" type="text" value="" placeholder="请输入手机号" v-model="loginName" style="width: 618.5rpx;height: 78.51rpx;background: #E8E8E8;box-sizing: border-box;padding: 20.77rpx 32rpx;font-size: 30.2rpx;" />
				</view>
				<view style="position: relative;width: 618.5rpx;height: 78.51rpx;">
					<input id="inp" type="text" value=""  v-model="password" placeholder="请输入密码"  style="width: 618.5rpx;height: 78.51rpx;background: #E8E8E8;box-sizing: border-box;padding: 20.77rpx 32rpx;font-size: 30.2rpx;"  v-if="loginWay == 'password'"/>
					<input id="inp" type="text" value=""  v-model="code" placeholder="请输入验证码"  style="width: 618.5rpx;height: 78.51rpx;background: #E8E8E8;box-sizing: border-box;padding: 20.77rpx 32rpx;font-size: 30.2rpx;" v-if="loginWay == 'code'"/>
					<input id="inp" type="text" value=""  v-model="yuanzheng_ma" placeholder="请输入验证码"  style="width: 618.5rpx;height: 78.51rpx;background: #E8E8E8;box-sizing: border-box;padding: 20.77rpx 32rpx;font-size: 30.2rpx;" v-if="loginWay == 'yuanzheng'"/>
					<view style="position: absolute;color: #EE7B30;font-size: 26.58rpx;top: 0rpx;left: 470rpx;height:78.51rpx ;z-index: 121212112121;width: 150rpx;text-align: center;background: #FF7300; color: #FFFFFF;border-radius: 5rpx;line-height: 78.51rpx;" v-if="loginWay == 'code'" @tap="getCode">{{yanzheng}}</view>
					<view style="position: absolute;color: #EE7B30;font-size: 26.58rpx;top: 0rpx;left: 470rpx;height:78.51rpx ;z-index: 1212121;width: 150rpx;text-align: center;line-height: 80.51rpx;background: #FF7300; color: #FFFFFF;border-radius: 5rpx;line-height: 78.51rpx;" v-if="loginWay == 'yuanzheng'" @tap="getCode_" >{{yanzheng}}</view>
				</view>
				<view>
					<view style="width: 618.5rpx;height: 78.51rpx;background: #EE7B30;text-align: center;line-height: 78.51rpx;font-size: 33.83rpx;color: #FFFFFF;font-weight: bold;letter-spacing: 3rpx;margin-top: 87rpx;border-radius: 6rpx;" @tap="login" v-if="loginWay != 'yuanzheng'">登录</view>
					<view style="width: 618.5rpx;height: 78.51rpx;background: #EE7B30;text-align: center;line-height: 78.51rpx;font-size: 33.83rpx;color: #FFFFFF;font-weight: bold;letter-spacing: 3rpx;margin-top: 87rpx;border-radius: 6rpx;" @tap="login_" v-if="loginWay == 'yuanzheng'">下一步</view>
				</view>
				<view style="font-size: 24.15rpx;color: #EE7B30;display: flex;justify-content: space-between;margin-top: 56.77rpx;">
					<view @tap="toforgetPass" v-if="loginWay != 'yuanzheng'">忘记密码</view>
					<view @tap="switchLoginWay('code')" v-if="loginWay == 'password'">手机验证码登录</view>
					<view @tap="switchLoginWay('password')" v-if="loginWay == 'code'">密码登录</view>
				</view>
			</view> -->
			
			<!-- 微信授权登录 -->
			<view style="width: 750rpx;position: fixed;top: 200rpx;display: flex;justify-content: center;flex-direction: column;align-items: center;">
				<view v-if="!canShow">
					<button  @tap="appLoginWx_" style="width: 92.412rpx;height: 92.412rpx;display: inline-block;padding: 0;margin: 0;border-radius: 50%;">
						<image :src="weixin" style="width: 92.412rpx;height: 92.412rpx;"></image>
					</button>
					<view style="font-size: 27rpx;font-weight: bold;margin-top: 20rpx;color: #EE7B30;letter-spacing: 2rpx;">微信登录</view>
				</view>
				
				<view  v-if="canShow">
					<button type="default" open-type="getPhoneNumber" @getphonenumber="getphonenumber" style="width: 600rpx;height: 100rpx;border-radius: 15rpx;background: #00C166;color: #FFFFFF;line-height: 100rpx;">绑定手机号码</button>
					<view style="font-size: 24rpx;color: #9E9E9E;text-align: center;width: 100vw;"> 请完成微信授权以继续使用 </view>
				</view>
			</view>
		</view>
		
		
		
		<!-- <view v-if="!isshow" style="margin-left: 66.44rpx;">
				<view style="position: absolute;width: 618.5rpx;top:140rpx ;display: flex;flex-direction: column;align-items: center;">
					<view style="font-size: 33rpx;color: #373737;letter-spacing: 1rpx;">请绑定手机号</view>
					<view style="width: 618.5rpx;height: 78.51rpx;position: relative;margin-top: 49rpx;">
						<input v-model="shouji_hao" placeholder="请输入手机号码" style="width: 618.5rpx;height: 78.51rpx;background: #E8E8E8;box-sizing: border-box;padding: 20.77rpx 32rpx;font-size: 30.2rpx;" />
					</view>
					<view style="width: 618.5rpx;height: 78.51rpx;position: relative;margin-top: 49rpx;">
						<input v-model="yanzheng_mi" placeholder="验证码" style="width: 618.5rpx;height: 78.51rpx;background: #E8E8E8;box-sizing: border-box;padding: 20.77rpx 32rpx;font-size: 30.2rpx;"/>
						<view @tap.stop="goqingqing" style="position: absolute;color: #EE7B30;font-size: 26.58rpx;top: 0rpx;left: 470rpx;height:78.51rpx ;z-index: 12121211212;width: 150rpx;text-align: center;line-height: 78.51rpx;background: #FF7300; color: #FFFFFF;border-radius: 5rpx;" >{{text}}</view>
					</view>
					<view @tap="go" style="width: 618.5rpx;height: 78.51rpx;background: #EE7B30;text-align: center;line-height: 78.51rpx;font-size: 33.83rpx;color: #FFFFFF;font-weight: bold;letter-spacing: 3rpx;margin-top: 87rpx;border-radius: 6rpx;">提交</view>
					<view @tap="gofan" style="width: 150rpx;height: 78.51rpx;background: #EE7B30;text-align: center;line-height: 78.51rpx;font-size: 33.83rpx;color: #FFFFFF;font-weight: bold;letter-spacing: 3rpx;margin-top: 87rpx;border-radius: 6rpx;">返回</view>
				</view>
			</view>
		</view> -->
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				xuance_:"手机验证码登录",
				zhuce:["登录","快速注册"],
				keyupFns: false,
				showPass: false,
				loginWay: 'password', //登录方式
				passType: 'password', //密码显示状态
				showGetCode: true, //点没点获取验证码
				loginName: '', //账号
				code: "", //验证码
				password: '', //密码
				isCode: true,
				time: 59,
				list: [], //通讯录
				xuanze:0,
				yanzheng:"获取验证码",
				yuanzheng_ma:"",
				isshow:true,
				shouji_hao: "",
				yanzheng_mi:"",
				text:"获取验证码",
				group_id: "",
				weixin: "http://img.curiousmore.com/805202",
				biaotou: "http://img.curiousmore.com/668859",
				excellent: "",
				canShow: false,
				
			};
		},
		onBackPress() {
			if (this.showMask) {
				this.showMask = false;
				return true;
			} else {
				uni.showModal({
					title: '提示',
					content: '是否退出应用？',
					success: function(res) {
						if (res.confirm) {
							plus.runtime.quit();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return true
			}
		},
		onShow() {
			this.xuanze = 0
		},
		onLoad(option) {
			if(option.num){
				this.group_id = option.num
			}
			if(option.excellent) {
				this.excellent = option.excellent
			}
			let a = ""
			try{
				a = uni.getStorageSync('user_token')
				if (a != "") {
					uni.reLaunch({
						url: '/pages/tabBer/newsshouye/newsshouye'
					})
				}
			} catch (res) {}
		},
		methods: {
			
			// 获取手机号码函数
			getphonenumber(res) {
				let me = this
				uni.login({
					success: (val) => {
						me.$myRequest({
							url: "/user/getSessionKey",
							data: {
								code: val.code
							}
						}).then((con) => {
							let pc = new me.$RdWXBizDataCrypt("wx14913bd70f000eff",JSON.parse(con.data).session_key)
							let data = pc.decryptData(res.detail.encryptedData, res.detail.iv)
							me.go(data.purePhoneNumber)
						})
					}
				})
			},
			
			// 登录请求数据 生成二维码
			addQrcode(invite_code) {
				uni.request({
					url: "https://cli.im/Home/Weapp/create",
					method: "post",
					header: {
						'content-type' : 'application/x-www-form-urlencoded'
					},
					data: {
						weapp_id: "wx14913bd70f000eff",
						weapp_secret: "5e81b50b4682fbd557a915d9f5657aa6",
						weapp_url: "pages/Other/shaixuan/shaixuan?scene=" + invite_code
					},
					success: (res) => {
						try {
							uni.setStorageSync('user_imgCode', res.data.data)
						}catch(e){}
					}
				})
			},
			
			gofan(){
				this.isshow = true
			},
			settime(){
				let me = this
				let time = 60
				const res = setInterval(() => {
					if(time > 0){
						time--
						me.text = time + "s"
					}else{
						clearInterval(res)
						me.text = "获取验证码"
					}
				},1000)
			},
			go(phone){
				let me = this
				try{
					let val = uni.getStorageSync('opnid')
					let list = uni.getStorageSync("user_list")
					let ll = uni.getStorageSync('ll')
					uni.request({
						url:"https://curiousmore.com/qmore/user/user/openIdLoginOrRegist",
						method:"POST",
						data:{
							platform: "wx",
							is_teach_paypal: "true",
							wx_openid: val,
							avatar: list.avatarUrl,
							nick_name: list.nickName,
							sex: list.gender,
							login_name: phone
						},
						header:{
							'content-type':'application/json'
						},
						success:(res) => {
							if(res.data.code == 0){
								try {
									uni.setStorageSync('userif_list', res.data.data.userInfoEntity);
									uni.setStorageSync('user_token', res.data.data.userToken);
									uni.setStorageSync('opnid', res.data.data.open_id);
									this.addQrcode(res.data.data.userInfoEntity.invite_code)
									if(this.excellent !== "") {
										uni.reLaunch({
											url: "/pages/Other/shaixuan/shaixuan?excellent=" + me.excellent
										})
									}else {
										uni.reLaunch({
											url: '/pages/tabBer/newsshouye/newsshouye'
										})
									}
								} catch (e) {}
							}
						}
					})
				}catch(e){console.log(e)}
			},
		async	goqingqing(){
				if(this.shouji_hao == ""){
					uni.showToast({
						title:"请填写手机号",
						icon:"none"
					})
				}else{
					const res = await this.$myRequest({
						url:"/sms/send",
						data:{
							mobile: this.shouji_hao
						}
					})
					if(res.code == 0){
						uni.showToast({
							title:"获取验证码成功"
						})
						this.settime()
					}
				}
			},
			appLoginWx_(){
				let me = this
				uni.getUserProfile({
					desc: '注册信息',
					success:(res) => {
						uni.login({
							success:(res_) => {
								uni.request({
									url:"https://curiousmore.com/qmore/user/user/openIdAppVerification",
									method:"POST",
									data:{
										platform:"wx",
										is_teach_paypal:"true",
										code:res_.code
									},
									header:{
										'content-type':'application/json'
									},
									success:(re) => {
										
										if(re.data.data.result){
											me.canShow = true
											try{
												uni.setStorageSync("opnid",re.data.data.open_id)
												uni.setStorageSync("user_list",res.userInfo)
											}catch(e){console.log(e)}
											me.isshow = false
										}else{
											try{
												uni.setStorageSync('userif_list', re.data.data.userInfoEntity);
												uni.setStorageSync('user_token', re.data.data.userToken);
												uni.setStorageSync("opnid",re.data.data.open_id)
												this.addQrcode(re.data.data.userInfoEntity.invite_code)
												if(this.excellent !== "") {
													uni.reLaunch({
														url: "/pages/Other/shaixuan/shaixuan?excellent=" + me.excellent
													})
												}else {
													uni.reLaunch({
														url: '/pages/tabBer/newsshouye/newsshouye'
													})
												}
											}catch(e){console.log(e)}
										}
									}
								})
							}
						})
					},
					
					fail: (err) => {
						console.log(err)
					}
				})
			},
		async	login_(){
				let me = this
				if(me.yuanzheng_ma == ""){
					uni.showToast({
						title:"请填写验证码",
						icon:"none"
					})
				}else{
				const res = await me.$myRequest({
						url:"/user/register",
						methed:"post",
						header:{
							"content-type":"application/json"
						},
						data:{
							login_name:me.loginName,
							platform:"wx",
							is_teach_paypal:"true",
							verification_code:me.yuanzheng_ma
						}
					})
					if(res.code == 0){
						uni.navigateTo({
							url:"/pages/Other/register/register?num=" + me.loginName
						})
					}
				}
			},
		async	getCode_(){
				let me = this
				if(me.loginName == ""){
					uni.showToast({
						title:"手机号码不完整",
						icon:"none"
					})
				}else{
					const res = await me.$myRequest({
						url:"/sms/send",
						data:{
							type:"register",
							mobile:me.loginName
						}
					})
					if(res.code == 0){
						uni.showToast({
							title:"验证码登录"
						})
						me.dingshiqi()
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
						me.loginName = ""
					}
				}
			},
			huanshu(item,index){
				let me = this
				me.xuanze = index
				if(item == "快速注册"){
					me.loginWay = "yuanzheng"
				}else {
					me.loginWay = "password"
				}
			},
			getPhoneNumber(res) {
				console.log(res)
			},
			keyupFn(e) {
				this.keyupFns = true
				console.log(this.keyupFns)
			},
			toHidePass() { //隐藏密码
				this.showPass = false;
				this.passType = 'password';
			},
			toShowPass() { //显示密码
				this.showPass = true;
			},
			deleteNum(type) {
				if (type == 'log') {
					this.loginName = ''
				} else if (type == 'pass') {
					this.password = ''
				}
			},
			toRegister() {
				uni.navigateTo({
					url: "/pages/Other/register/register"
				})
			},
			switchLoginWay(type) { //验证码和密码登录切换
				this.loginWay = type
			},
			getCode(){
				if(this.loginName == ''){
					uni.showToast({
						title: '请输入手机号或邮箱',
						icon: 'none'
					})
				}else{
					this.yanzhengll()
				}
			},
			async yanzhengll(){
				const res = await this.$myRequest({
					url:"/sms/send",
					method:"get",
					data:{
						mobile: this.loginName,
						type: 'login'
					}
				})
				if(res.code == 0){
					this.dingshiqi()
				}
			},
			dingshiqi(){
				let a = 60
				const int = setInterval(() => {
					this.yanzheng = a + "秒"
					a--
					if(a == 0){
						clearInterval(int)
						this.yanzheng = "获取验证码"
					}
				},1000)
			},
			sendTelCode() { //发送手机验证码
				let data = {
					mobile: this.loginName,
					type: 'login'
				};
				let me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'sms',
					actionName: 'send',
					data: data,
					successBack: function(res) {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == 0) { //返回成功
							me.showGetCode = false;
							me.computeTime();
						}
					},
				})
			},
			sendEmailCode() { //发送邮箱验证码
				var data = {
					mail: this.loginName,
					type: 'login'
				};
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'mail',
					actionName: 'send',
					data: data,
					successBack: function(res) {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						if (res.data.code == 0) {
							me.showGetCode = false;
							me.computeTime();
						}
					},
				})
			},
			computeTime() {
				var me = this;
				setInterval(function() {
					if (me.time > 0) {
						me.time--;
					} else {
						me.showGetCode = true;
						me.time = 59;
					}
				}, 1000)
			},
			toforgetPass() { //忘记密码
				uni.navigateTo({
					url: '/pages/Other/forgetPass/forgetPass'
				})
			},
			login() { //登录
				let data = {}
				if (this.loginWay == 'password') { //密码
					if (this.loginName == '') {
						uni.showToast({
							title: '请输入手机号或邮箱',
							icon: 'none'
						})
						return;
					} else if (this.password == '') {
						uni.showToast({
							title: '请输入密码',
							icon: 'none'
						})
						return;
					}
					data = {
						login_name: this.loginName,
						login_pass: this.password,
						login_type: '1',
						platform: "android",
						is_teach_paypal:"true"
					}
				}
				if (this.loginWay == 'code') { //验证码
					if (this.loginName == '') {
						uni.showToast({
							title: '请输入手机号或邮箱',
							icon: 'none'
						})
						return;
					} else if (this.code == '') {
						uni.showToast({
							title: '请输入验证码',
							icon: 'none'
						})
						return;
					} else {
						data = {
							login_name: this.loginName,
							verification_code: this.code,
							login_type: '2',
							platform: "android",
							is_teach_paypal:"true"
						}
					}
				}
				uni.request({
					url: 'https://curiousmore.com/qmore/user/user/login',
					method: 'POST',
					data: data,
					success: (res) => {
						if(res.data.code == 0){
							try {
								uni.setStorageSync('userif_list', res.data.data.userInfoEntity);
								uni.setStorageSync('user_token', res.data.data.userToken);
								uni.setStorageSync('user_openId', res.data.data.open_id);
								if(uni.getStorageSync('shenfen')){
									
								}else{
									uni.navigateTo({
										url: '/pages/tabBer/newsshouye/newsshouye'
									})
								}
							} catch (e) {}
						}else{
							uni.showToast({
							    title: res.data.message,
							    duration: 2000,
								icon:"none"
							});
						}
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			logout(){
				uni.redirectTo({
					url:"/pages/tabBer/newsshouye/newsshouye"
				})
			},
			toWebview(type) {
				uni.navigateTo({
					url: '../../../pages/Meet/newWebView/newWebView?type=' + type
				})
			},
		},
	}
</script>

<style scoped>
	 #inp::-webkit-input-placeholder {  color : #D8D8D8  ; }
	.bg {
		background: #FFFFFF;
		height: 100%;
		position: relative;
	}

	.headImg_bg {
		padding-top: 178upx;
	}

	.headImg {
		width: 136upx;
		height: 136upx;
		background: rgba(70, 206, 207, 1);
		border-radius: 50%;
		margin: 0 auto;
		overflow: hidden;

	}

	.headImg image {
		width: 136upx;
		height: 136upx;
		padding-top: 3upx;
	}

	.body {
		margin-top: 120upx;
	}

	.body_item {
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		align-items: center;
		padding: 20upx 24upx;
		margin-top: 17upx;
		font-size: 28upx;
		color: #333333;
	}

	.body_item input {
		width: 100%;
	}

	.left_img {
		width: 46upx;
		height: 40upx;
		margin-right: 20upx;
	}

	.delete {
		width: 30upx;
		height: 25upx;
	}

	.showOrHide {
		width: 36upx;
		height: 30upx;
		margin-left: 30upx;
	}

	.loginbtn {
		margin-top: 80upx;
		background-color: #fff;
		border: none;
	}
	.btn{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.btn view{
		width: 45%;
		background-color: #46CECF;
		border-radius: 10px;
	}
	.btn view:nth-of-type(1){
		color: #999999;
		/* background-color: gray; */
		border: 1px solid #999999;
		background-color: #FFFFFF;
		
	}
	.log_type_box {
		position: relative;
	}

	.register {
		color: #46CECF;
		font-size: 32upx;
		position: absolute;
		left: 310upx;
		top: 0upx;
	}


	.log_type {
		display: flex;
		justify-content: space-between;
		padding: 0 24upx;
		margin-top: 60upx;
		font-size: 28upx;
		color: #666666;
	}

	.body_bottom {
		color: #999999;
		font-size: 20upx;
		position: absolute;
		bottom: 60upx;
		width: 100%;
		text-align: center;
	}

	.body_bottom text {
		color: #47CECF;
	}

	.getyanzhengma {
		width: 120px;
		display: flex;
		flex-direction: row-reverse;
	}

	.borderBox {
		height: 33upx;
		border-left: 1upx solid #E6E6E6;
	}

	.third_party {
		width: 100%;
		position: absolute;
		bottom: 170upx;
	}

	.border-big {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		font-size: 24upx;
		width: 100%;
		margin-bottom: 60upx;
	}

	.border-big text {
		padding: 0 10upx;
	}

	.border-box {
		height: 1upx;
		width: 230upx;
		border-bottom: 2upx solid #E6E6E6;
	}

	.weixinImg {
		width: 90upx;
		height: 90upx;
		position: absolute;
		left: 0upx;
		top: 0upx;
	}
</style>


